<template>
	<view>
		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon1.png" mode=""></image>
				</view>
				<view class="">
					客户信息
				</view>
			</view>

			<view class="inputs">
				<view class="text_l">
					姓名
				</view>
				<view class="text_r">
					<input confirm-type="done" v-model="params.customerName" type="text" placeholder="请输入"
						placeholder-class="inputplace" />
				</view>
			</view>
			<view class="inputs">
				<view class="text_l">
					电话
				</view>
				<view class="text_r">
					<input maxlength="11" confirm-type="done" v-model="params.customerPhone" type="number"
						placeholder="请输入" placeholder-class="inputplace" />
				</view>
			</view>
			<view class="inputs" style="border: none;">
				<view class="text_l">
					分类
				</view>
				<view class="text_select" @click="openPopup('分类','jzd_customer_type',mevalue.fenlei)">
					<view class="select" :class="mevalue.fenlei==''?'':'selectact'">
						{{mevalue.fenlei?mevalue.fenlei:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
		</view>


		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon5.png" mode=""></image>
				</view>
				<view class="">
					类型及材质
				</view>
			</view>
			<view class="inputs" :style="{border:params.productType == 'ZZM'?'none':''}">
				<view class="text_l">
					材质
				</view>
				<view class="text_select" @click="openPopup('材质','jzd_type',mevalue.caizhi)">
					<view class="select" :class="mevalue.caizhi==''?'':'selectact'">
						{{mevalue.caizhi?mevalue.caizhi:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
			<view class="inputs" style="border: none;" v-if="params.productType != 'ZZM'">
				<view class="text_l">
					封口类型
				</view>
				<view class="text_select" @click="openPopup('封口类型','jzd_mouth_type',mevalue.fengkou)">
					<view class="select" :class="mevalue.fengkou==''?'':'selectact'">
						{{mevalue.fengkou?mevalue.fengkou:'请选择'}}
					</view>
					<view class="">
						<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
					</view>
				</view>
				<view v-if="params.mouthType == 'MAGIC'" class="text_select"
					@click="openPopup('魔术贴','jzd_mst_size',mevalue.moshutie)">
					<view class="select" :class="mevalue.moshutie==''?'':'selectact'">
						{{mevalue.moshutie?mevalue.moshutie:'选择魔术贴尺寸'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>

		</view>



		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon2.png" mode=""></image>
				</view>
				<view class="">
					尺寸及数量
				</view>
			</view>

			<view class="sc_flex">
				<view class="item i1">
					<view class="">长(cm)</view>
					<input confirm-type="done" type="digit" v-model="params.sizeLong" />
				</view>
				<view class="item i1">
					<view class="">宽(cm)</view>
					<input confirm-type="done" type="digit" v-model="params.sizeWidth" />
				</view>
				<view class="item i1">
					<view class="">高(cm)</view>
					<input confirm-type="done" type="digit" v-model="params.sizeHeight" />
				</view>
				<view class="item i2">
					<view class="">商品数量(个)</view>
					<input confirm-type="done" type="number" v-model="params.productCount" />
				</view>
				<view class="item i2">
					<view class="">克重(g)</view>
					<input confirm-type="done" type="digit" v-model="params.gram" />
				</view>
			</view>
		</view>



		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon3.png" mode=""></image>
				</view>
				<view class="">
					更多信息
				</view>
			</view>
			<view class="inputs" v-if="params.productType != 'ZZM'">
				<view class="text_l">
					布
				</view>
				<view class="text_select" @click="openPopup('布','jzd_bu_type',mevalue.bu)">
					<view class="select" :class="mevalue.bu==''?'':'selectact'">
						{{mevalue.bu?mevalue.bu:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
			<view class="inputs" v-if="params.productType == 'LM'">
				<view class="text_l">
					铝
				</view>
				<view class="text_select" @click="openPopup('铝','jzd_lv_type',mevalue.lv)">
					<view class="select" :class="mevalue.lv==''?'':'selectact'">
						{{mevalue.lv?mevalue.lv:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
			<view class="inputs" v-if="params.productType != 'ZZM'">
				<view class="text_l">
					切边
				</view>
				<view class="">
					<radio-group @change="radioChange">
						<label style="margin-right: 30rpx;" v-for="(item,index) in radioList" :key='index'>
							<radio style="scale: 0.7;" 
							:checked="item.dictValue === params.cutType"
							color="#196AEB" :value="item.dictValue" />
							{{item.dictLabel}}
						</label>
					</radio-group>
				</view>
			</view>
			<view class="inputs">
				<view class="text_l">
					包装要求
				</view>
				<view class="text_select" @click="openPopup('包装要求','jzd_package_rule',mevalue.baozhaung)">
					<view class="select" :class="mevalue.baozhaung==''?'':'selectact'">
						{{mevalue.baozhaung?mevalue.baozhaung:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
			<view class="inputs">
				<view class="text_l">
					印刷版数
				</view>
				<view class="text_r">
					<input confirm-type="done" v-model="params.printingCount" type="number" placeholder="请输入"
						placeholder-class="inputplace" />
				</view>
			</view>
			<view class="inputs">
				<view class="text_l">
					其他费用
				</view>
				<view class="text_r">
					<input confirm-type="done" v-model="params.addPrice" type="digit" placeholder="请输入"
						placeholder-class="inputplace" />
				</view>
			</view>
			<view class="inputs" style="border: none;">
				<view class="text_l">
					税点
				</view>
				<view class="text_select" @click="openPopup('税点','self_tax_type',mevalue.shuidian)">
					<view class="select" :class="mevalue.shuidian==''?'':'selectact'">
						{{mevalue.shuidian?mevalue.shuidian:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
		</view>

		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon4.png" mode=""></image>
				</view>
				<view class="">
					打包体积
				</view>
			</view>
			<view class="tj">
				<view class="ti_flex">
					<view class="texts">{{mevalue.pingfang}}</view>
					<view class="dw">m³</view>
				</view>
				<view class="btn" @click="jsbj">
					点击计算
				</view>
			</view>
		</view>

		<view class="zw">
		</view>

		<view class="btns" @click="handleTj">
			<view class="text">报价</view>
		</view>


		<uni-popup type="bottom" ref="popup" :safe-area="false">
			<view class="popup">
				<view class="pop_tit">
					请选择{{textType}}
				</view>
				<view class="pop_list">
					<view class="ites" v-for="(item,index) in list" :key="index" @click="changeType(item)"
						:class="item.dictLabel==dictLabel?'itesactive':''">
						{{item.dictLabel}}
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popupbj" type="center">
			<view class="popupbj">
				<view class="title">报价结果</view>
				<uni-icons @click="close" class="icons" type="closeempty" size="20"></uni-icons>
				<view class="cont_top">
					<view class="flex_l">
						<view class="itss">
							姓名 <span>{{nowinfo.customerName}}</span>
						</view>
						<view class="itss">
							电话 <span>{{nowinfo.customerPhone}}</span>
						</view>
						<view class="itss">
							分类 <span>{{nowinfo.customerType}}</span>
						</view>
					</view>
					<view class="flex_r">
						<image :src="url" mode=""></image>
						<view class="ts">模型展示</view>
					</view>
				</view>
				<view class="cont_c">
					<view class="item">
						<view class="i_ltext">材质</view>
						<view class="">{{nowinfo.productType}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">封口类型</view>
						<view class="">{{nowinfo.mouthType}}</view>

						<view class="" style="margin-left: 30rpx;">{{nowinfo.magicSize}}</view>

					</view>
					<view class="item">
						<view class="i_ltext">尺寸</view>
						<view class="">
							<span v-if="nowinfo.sizeLong">
								长:{{nowinfo.sizeLong}} cm；
							</span>
							<span v-if="nowinfo.sizeWidth">
								宽:{{nowinfo.sizeWidth}} cm；
							</span>
							<span v-if="nowinfo.sizeHeight">
								高:{{nowinfo.sizeHeight}} cm；
							</span>
						</view>
					</view>
					<view class="item">
						<view class="" style="display: flex;align-items: center;width: 50%;">
							<view class="i_ltext">商品数量</view>
							<view class="">{{nowinfo.productCount}} 个</view>
						</view>
						<view class="" style="display: flex;align-items: center;width: 50%;">
							<view class="i_ltext">克重</view>
							<view class="">{{nowinfo.gram}} g</view>
						</view>
					</view>
					<view class="item" v-if="nowinfo.productType != '珍珠棉'">
						<view class="i_ltext">布</view>
						<view class="">{{nowinfo.buCode}}</view>
					</view>
					<view class="item" v-if="nowinfo.productType == '机制铝膜'">
						<view class="i_ltext">铝</view>
						<view class="">{{nowinfo.lvCode}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">切边</view>
						<view class="">{{nowinfo.cutType}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">包装要求</view>
						<view class="">{{nowinfo.packageCode}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">印刷版数</view>
						<view class="">{{nowinfo.printingCount}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">其他费用</view>
						<view class="">{{nowinfo.addPrice}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">税点</view>
						<view class="">{{nowinfo.taxCode}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">打包体积</view>
						<view class="">{{nowinfo.volume}} m³</view>
					</view>
				</view>
				<view class="cont_b">
					<view class="b_l">
						最终单价(元) <span>含税</span>
					</view>
					<view class="b_r">
						<span>￥</span>{{nowinfo.sellPrice}}
					</view>
				</view>
				<view class="cont_b">
					<view class="b_l">
						版费(元)
					</view>
					<view class="b_r">
						<span>￥</span>{{nowinfo.editionAmount}}
					</view>
				</view>
				<view class="btn" @click="gopage2img">
					生成海报
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getdict,
		computedTjjzd,
		postQuotejzd
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				params: {
					"customerName": "", //姓名
					"customerPhone": "", //电话
					"customerType": "", //分类  jzd_customer_type
					"mouthType": "", //分口类型 jzd_mouth_type
					"productType": "", //材质
					"magicSize": '', //魔术贴尺寸
					"sizeLong": '', //长
					"sizeWidth": '', //高
					"sizeHeight": '', //宽
					"productCount": '', //数量
					"gram": '', //克重
					"buCode": "", //布
					"lvCode": '', //铝
					cutType: "", //切边
					"packageCode": "", //包装要求
					"printingCount": 1, //印刷版书
					"addPrice": '', //其他费用
					"taxCode": "", //岁点
				},
				mevalue: {
					fenlei: '',
					fengkou: '',
					caizhi: '',
					moshutie: '',
					bu: '',
					lv: '',
					baozhaung: '',
					shuidian: '',
					pingfang: 0
				},
				list: [],
				dictLabel: '', //弹窗公共渲染值
				textType: '', //弹窗公共渲染值
				nowinfo: {},

				radioList: []

			};
		},
		computed:{
			url(){
				if(this.nowinfo.productType&&this.nowinfo.mouthType){
					return 	`/static/img/${this.nowinfo.productType + this.nowinfo.mouthType}.png`
				}
			}
		},
		onLoad() {
			getdict('jzd_is_cut').then(res => {
				
				this.radioList = res.data
			})
		},
		methods: {
			gopage2img() {
				uni.setStorageSync('hbinfo', this.nowinfo)
				uni.navigateTo({
					url: '/pages/ipage/page2hb'
				})
			},
			close() {
				this.$refs.popupbj.close()
			},
			jsbj() {
				if (this.params.mouthType == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择封口类型'
					})
					return
				}
				if (this.params.productType == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择材质'
					})
					return
				}
				if (this.params.sizeLong == '') {
					uni.showToast({
						icon: 'none',
						title: '尺寸长不能为空'
					})
					return
				}
				if (this.params.sizeWidth == '') {
					uni.showToast({
						icon: 'none',
						title: '尺寸宽不能为空'
					})
					return
				}
				if (this.params.sizeHeight == '') {
					uni.showToast({
						icon: 'none',
						title: '尺寸高不能为空'
					})
					return
				}

				if (this.params.productCount == '') {
					uni.showToast({
						icon: 'none',
						title: '数量不能为空'
					})
					return
				}
				let obj = {
					mouthType: this.params.mouthType,
					productType: this.params.productType,
					sizeLong: this.params.sizeLong,
					sizeHeight: this.params.sizeHeight,
					sizeWidth: this.params.sizeWidth,
					productCount: this.params.productCount,
				}
				computedTjjzd(obj).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '计算结果已更新'
						})
						this.mevalue.pingfang = res.data
					}
				})
			},
			//单选
			radioChange(e) {
				this.params.cutType = e.detail.value
			},
			openPopup(text, url, value) {
				this.list = []
				this.textType = text //弹窗
				getdict(url).then(res => {
					this.list = res.data
					this.dictLabel = this.list.find(item => item.dictLabel == value)?.dictLabel
					this.$refs.popup.open()
				})
			},
			changeType(item) {
				console.log(this.textType, item);
				if (this.textType == '分类') {
					this.mevalue.fenlei = item.dictLabel
					this.params.customerType = item.dictValue
				} else if (this.textType == '封口类型') {
					this.mevalue.fengkou = item.dictLabel
					this.params.mouthType = item.dictValue
				} else if (this.textType == '材质') {
					this.mevalue.caizhi = item.dictLabel
					this.params.productType = item.dictValue
					this.params.buCode = ''
					this.params.lvCode = ''
					this.mevalue.bu = ''
					this.mevalue.lv = ''
					if (this.params.productType == 'ZZM') {
						this.params.cutType = 'YES'
						this.params.mouthType = "TAPE"
						this.params.magicSize = ''
					} else {
						this.params.cutType = ''
						this.mevalue.fengkou = ''
						this.params.mouthType = ""
					}
				} else if (this.textType == '魔术贴') {
					this.mevalue.moshutie = item.dictLabel
					this.params.magicSize = item.dictValue
				} else if (this.textType == '布') {
					this.mevalue.bu = item.dictLabel
					this.params.buCode = item.dictValue
				} else if (this.textType == '铝') {
					this.mevalue.lv = item.dictLabel
					this.params.lvCode = item.dictValue
				} else if (this.textType == '包装要求') {
					this.mevalue.baozhaung = item.dictLabel
					this.params.packageCode = item.dictValue
				} else if (this.textType == '税点') {
					this.mevalue.shuidian = item.dictLabel
					this.params.taxCode = item.dictValue
				}
				this.$refs.popup.close()
			},
			handleTj() {
				console.log(this.params);
				if (this.params.customerName == '') {
					uni.showToast({
						icon: 'none',
						title: '姓名不能为空'
					})
					return
				}
				if (this.params.customerPhone == '') {
					uni.showToast({
						icon: 'none',
						title: '电话不能为空'
					})
					return
				}
				if (this.params.customerType == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择分类'
					})
					return
				}

				if (this.params.mouthType == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择封口类型'
					})
					return
				}
				if (this.params.productType == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择材质'
					})
					return
				}
				if (this.params.cutType == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择是否切边'
					})
					return
				}
				if (this.params.packageCode == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择包装要求'
					})
					return
				}
				if (this.params.printingCount == '') {
					uni.showToast({
						icon: 'none',
						title: '印刷版数不能为空'
					})
					return
				}
				if (this.params.taxCode == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择税点'
					})
					return
				}
				console.log(this.params);
				postQuotejzd(this.params).then(res => {
					if (res.code == 200) {
						this.nowinfo = res.data
						this.$refs.popupbj.open()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.popupbj {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
		}

		.icons {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		.cont_top {
			width: 630rpx;
			background: #F8F8F8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			padding: 16rpx 26rpx 10rpx 20rpx;
			box-sizing: border-box;
			justify-content: space-between;

			.flex_l {
				.itss {
					margin-bottom: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #979797;
					line-height: 33rpx;

					span {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						margin-left: 20rpx;
					}
				}

			}

			.flex_r {
				text-align: center;

				image {
					width: 160rpx;
					height: 160rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 1rpx solid #DADADA;
				}

				.ts {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #C9C9C9;
				}
			}
		}

		.cont_c {
			border-bottom: 1px solid #eee;
			padding-bottom: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;

			.item {
				display: flex;
				margin: 18rpx auto;
				align-items: center;

				.i_ltext {
					width: 120rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #979797;
					margin-right: 20rpx;
				}
			}
		}

		.cont_b {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 32rpx auto;

			.b_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				span {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FF1919;
					margin-left: 6rpx;
				}
			}

			.b_r {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #FF1A1A;

				span {
					font-size: 24rpx;
				}
			}
		}

		.btn {
			width: 520rpx;
			height: 80rpx;
			background: #196AEB;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 80rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}

	page {
		background: #F7F8FA;
	}

	.popup {
		width: 750rpx;
		max-height: 720rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -12rpx 26rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 48rpx 76rpx;
		box-sizing: border-box;

		.pop_tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
		}

		.pop_list {
			overflow: auto;
			max-height: 560rpx;
			margin-top: 20rpx;
		}

		.ites {
			height: 120rpx;
			background: #F6F6F6;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 20rpx;
			text-align: center;
			line-height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.itesactive {
			background: #196AEB;
			color: #ffffff;
		}
	}

	.inputplace {
		color: #DADADA;
		font-size: 28rpx;
	}

	.its {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 20rpx auto;
		padding: 28rpx 26rpx 0rpx 26rpx;
		box-sizing: border-box;

		.sc_flex {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 20rpx auto;

			.item {
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;

				input {
					width: 90%;
					height: 68rpx;
					background: #F6F6F6;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-top: 15rpx;
				}
			}

			.i1 {
				width: 33%;
			}

			.i2 {
				width: 50%;
				margin: 25rpx auto 30rpx;
			}
		}

		.flex_jub {
			display: flex;
			justify-content: space-between;
		}

		.it_tit {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 5rpx;
			}

			font-family: PingFang SC,
			PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
		}

		.tj {
			margin: 20rpx auto;
			padding-bottom: 26rpx;
			display: flex;
			justify-content: space-between;

			.texts {
				width: 306rpx;
				height: 60rpx;
				background: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding-left: 10rpx;
				font-size: 28rpx;
				line-height: 60rpx;
			}

			.ti_flex {
				display: flex;
				align-items: center;

				.dw {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					margin-left: 10rpx;
				}
			}

			.btn {
				height: 60rpx;
				background: #196AEB;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				padding: 0 16rpx;
			}
		}

		.inputs {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			margin-top: 30rpx;
			padding-bottom: 26rpx;
			position: relative;

			.ads {
				position: absolute;
				bottom: 0%;
				font-size: 24rpx;
				color: red;
			}

			.text_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				width: 174rpx;
			}

			.text_r {
				flex: 1;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.text_select {
				flex: 1;
				display: flex;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				align-items: center;

				.select {
					color: #DADADA;
				}

				.selectact {
					color: #000000;
				}
			}
		}
	}

	.btns {
		position: fixed;
		bottom: 0%;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9;
		background-color: #F7F8FA;

		.text {
			width: 710rpx;
			height: 100rpx;
			background: #196AEB;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			margin: 0 auto;
			box-sizing: border-box;
		}
	}

	.zw {
		height: calc(110rpx + constant(safe-area-inset-bottom));
		height: calc(110rpx + env(safe-area-inset-bottom));
	}
</style>